<template>
  <div class="p-d">
    <div class="p-d b-f">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="m-t p-d b-f">
      <div class="btnStyle flex-between ">
        <ButtonComp :buttonData="buttonData" />
      </div>
      <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
        :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
      </TableCompEle>
    </div>
    <PreviewPdf v-if="showPdf" :pdfUrl="pdfUrl" @closeLookPdf="closeLookPdf" />
  </div>
</template>

<script>
import { getGuide, deletes } from '@/api/guide.js'
import PreviewPdf from '@/views/common/previewPdf.vue'
import { getWord2Pdf } from '@/api/common.js'
export default {
  components: { PreviewPdf },
  data() {
    return {
      showPdf: false,
      pdfUrl: null,
      multipleSelection: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      buttonData: [
        {
          kind: 'button',
          label: '新增',
          plain: false,
          size: 'small',
          type: 'primary',
          click: () => {
            this.$router.push({
              name: 'GuidePublicAdd',
              params: { flag: 'add' }
            })
          }
        },
        {
          kind: 'button',
          label: '批量删除',
          plain: false,
          size: 'small',
          type: 'danger',
          click: () => {
            if (this.multipleSelection.length == 0) {
              this.$message({
                type: 'warning',
                message: '请选择要删除的数据'
              })
              return
            }
            const ids = []
            this.multipleSelection.forEach(items => {
              ids.push(items.id)
            })
            this.deleteFun(ids)
          }
        }
      ],
      tableData: [],
      tableConfig: [
        {
          prop: 'name',
          label: '研究指南名称'
        },
        {
          prop: 'yearStr',
          label: '年度'
        },
        {
          prop: 'budget',
          label: '指南预算（万元）'
        },
        {
          prop: 'fileName',
          label: '文件',
          isLink: true,
          type: 'primary',
          method: row => {
            this.lookLink(row)
          }
        },
        {
          prop: 'departmentName',
          label: '发布单位'
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(190),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'GuidePublicAdd',
                params: { flag: 'look', id: row.id }
              })
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$router.push({
                name: 'GuidePublicAdd',
                params: { flag: 'edit', id: row.id }
              })
            }
          },
          {
            label: '下载',
            isLink: true,
            type: 'primary',
            method: row => {
              this.downLoadFile(row)
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun([row.id])
            }
          }
        ]
      },
      queryString: {
        name: '',
        yearStr: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '指南名称',
            prop: 'name',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入指南名称'
          },
          {
            type: 'Date',
            isDateType: 'year',
            label: '年度',
            prop: 'yearStr',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请选择年度',
            format: 'yyyy',
            valueFormat: 'yyyy'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              name: '',
              yearStr: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    lookLink(item) {
      let txt = this.getMatchType(item.filePath)
      if (txt === 'word') {
        getWord2Pdf({ wordPath: item.filePath }).then(res => {
          if (res.data) {
            this.lookPdf(res.data)
          } else {
            this.$message.warning('暂无法预览，请下载后查看！')
          }
        })
      } else {
        if (txt === 'pdf') {
          this.lookPdf(item.filePath)
        } else {
          this.$message.warning('文件不支持预览！')
        }
      }
    },
    lookPdf(url) {
      this.pdfUrl = url
      this.showPdf = true
    },
    closeLookPdf() {
      this.showPdf = false
      this.pdfUrl = null
    },
    getList() {
      getGuide(
        Object.assign(
          {
            currentPage: this.queryParams.currentPage,
            pageSize: this.queryParams.pageSize
          },
          this.queryString
        )
      ).then(res => {
        if (res.data && res.data.list) {
          this.tableData = res.data.list
        } else {
          this.tableData = []
        }
        if (res.data && res.data.total) {
          this.queryParams.total = res.data.total
        } else {
          this.queryParams.total = 0
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteFun(ids) {
      this.$confirm(`确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deletes({
            ids: ids
          }).then(() => {
            this.$refs.multipleTable.clearSelection()
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    downLoadFile(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    }
  }
}
</script>

<style lang="less" scoped>
</style>